import { Component } from '@angular/core';
import { ICellRendererAngularComp } from '@ag-grid-community/angular';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { deepClone, getO } from '../../../utils/utils';

@Component({
  selector: 'apes-grid-button',
  template: `
    <ng-container *ngFor="let btn of buttonList; let i = index;">
      <button *ngIf="getButtonHide(btn.id)"
              style="flex:1 1"
              apesType="link" apes-button
              (click)="clickOperating($event,i)"
              [ngStyle]="showBtnStyle(btn)"
              [disabled]="btn.disabled">
        <ng-container *ngIf="!btn.hasOwnProperty('icon')">
          {{getCustomName(btn)}}
        </ng-container>
        <ng-container *ngIf="btn.hasOwnProperty('icon')">
          <i apes-icon [ngStyle]="showIconStyle(btn)"
             [apesType]="btn.icon"
             [apesTheme]="showBtnIconTheme(btn)"></i>
        </ng-container>
      </button>
    </ng-container>
  `,
  styles: [],
})
export class RenderButtonComponent implements ICellRendererAngularComp {

  refresh(params: any): boolean {
    return false;
  }

  params: any;
  ctx: any = {};
  apesConfig: any;

  data: any = {};
  gridName: any = '';

  buttonList = [];

  isLoading: boolean = false;

  constructor(
    private expressionService: ExpressionService,
  ) {
  }

  agInit(params: any): void {
    this.params = params;
    if (params.hasOwnProperty('context')) {
      this.ctx = params.context;
      this.gridName = this.ctx.gridName;
    }
    this.apesConfig = this.extend(params);
    this.apesConfig = { ...this.apesConfig, ...params['column']['colDef'] };

    if (this.params.hasOwnProperty('colDef')) {
      this.data = this.params.data;
    } else {
      this.data = this.params.node.data;
    }

    this.buttonList = this.apesConfig.buttonList;
  }

  extend(data: any) {
    let result = {};
    for (let key in data) {
      let value = data[key];
      if (key === 'context') {
        result['ctx'] = value;
      } else {
        result[key] = value;
      }
    }
    return result;
  }

  clickOperating(e,i) {
    e.preventDefault();
    e.stopPropagation();
    let btn = this.buttonList[i];
    if (btn.action == 'button') {
      this.openButton(btn);
    }
  }

  // 确认
  openButton(params) {
    let callbackBody = this.apesConfig.callback;
    let node = { ...params };

    this.expressionService.evaluate(callbackBody, {
      context: this.ctx,
      form: this.ctx['form'],
      model: this.ctx['model'],
      data: this.data,
      node: node,
    }, true);

  }

  getButtonHide(id: any) {
    let iLen;

    iLen = this.buttonList.length;
    let expression = 'false';
    for (let i = 0; i < iLen; i++) {
      let button;
      button = this.buttonList[i];
      if (id == button.id) {
        expression = button.hide || 'false';
        break;
      }
    }
    return !this.expressionService.eval(expression, {
      context: this.ctx,
      model: this.ctx['model'],
      data: this.data,
    });
  }

  getCustomName(btn) {
    if (btn.name.indexOf('\'') == -1) return btn.name;
    let value = deepClone(btn.name);
    value = value.replace(/\'/g, '');

    let name = this.expressionService.evaluate(value, {
      context: this.ctx,
      model: this.ctx['model'],
      data: this.data,
    });

    if (name == null) {
      name = btn.name;
    }

    return name;
  }

  showBtnStyle(btn){
    let style
    if(btn.hasOwnProperty('btnStyle')){
      style = getO(btn.btnStyle);
    }
    return style;
  }

  showIconStyle(btn){
    let style
    if(btn.hasOwnProperty('iconStyle')){
      style = getO(btn.iconStyle);
    }
    return style;
  }

  showBtnIconTheme(btn){
    let theme = 'outline'
    if(btn.hasOwnProperty('iconTheme')){
      let expression = btn.iconTheme;
      theme = this.expressionService.evaluate(expression, {
        context: this.ctx,
        model: this.ctx['model'],
        data: this.data,
      });
    }
    return theme;
  }

}
